<template>
  <div class="activity-list" v-loading="isLoading">
    <div class="header-container">
      <img src="../assets/9.jpg" class="logo" @click="goHome" />
      <div style="margin-left: auto; margin-right: 20px">
        <el-link @click="logout">退出登录</el-link>
      </div>
      <div>
        <el-button type="success" style="float: right" @click="toAddActivity"
          >上传活动</el-button
        >
      </div>
    </div>
    <el-table :data="activityList" style="width: 100%" class="table">
      <el-table-column prop="picture" label="活动图片" width="180">
        <template v-slot="scope">
          <img
            @click="showImg(scope.row.activityPictureUrl)"
            :src="scope.row.activityPictureUrl"
            alt="活动图片"
            class="activity-image"
          />
        </template>
      </el-table-column>
      <el-table-column prop="content" label="活动内容" min-width="300">
        <template v-slot="scope">
          <div class="content-text">{{ scope.row.activityContent }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="volunteerTime" label="活动服务时长" width="150">
        <template v-slot="scope">
          <div class="volunteer-time">{{ scope.row.activityTime }} 小时</div>
        </template>
      </el-table-column>
      <el-table-column prop="volunteerTime" label="添加时间" width="150">
        <template v-slot="scope">
          {{ scope.row.createTime | timeFormat }}
        </template>
      </el-table-column>
      <el-table-column prop="volunteerTime" label="操作" width="150">
        <template v-slot="scope">
          <el-button type="danger" @click="toDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <save-activity-dialog ref="saveActivityDialog" @getData="load" />
    <el-dialog :visible.sync="isImgPreview" top="2vh">
      <img :src="previewImg" width="100%" />
    </el-dialog>
  </div>
</template>

<script>
import SaveActivityDialog from "./SaveActivityDialog";
import request from "@/utils/request";

export default {
  name: "ActivityList",
  components: {
    SaveActivityDialog,
  },
  data() {
    return {
      isLoading: false,
      isImgPreview: false,
      previewImg: "",
      activityList: [],
    };
  },
  created() {
    this.load();
  },

  methods: {
    toDelete(id) {
      this.$confirm("此操作将永久删除该活动, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteActivity(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    deleteActivity(id) {
      this.isLoading = true;
      request.getRequest("/api/activity/delete", { id: id }).then((res) => {
        this.isLoading = false;
        if (res.data.code === 0) {
          this.load();
          this.$message({
            type: "success",
            message: "已成功删除",
          });
        }
      });
    },
    logout() {
      localStorage.clear();
      this.$store.commit("logout");
      this.$router.push("/NewHome");
    },
    showImg(url) {
      this.previewImg = url;
      this.isImgPreview = true;
    },
    load() {
      this.isLoading = true;
      request.getRequest("/api/activity/list").then((res) => {
        this.isLoading = false;
        if (res.data.code === 0) {
          this.activityList = res.data.data;
        } else {
          this.$message({
            type: "error",
            message: "加载失败",
          });
        }
      });
    },
    goHome() {
      this.$router.push({ name: "NewHome" });
    },
    toAddActivity() {
      this.$refs.saveActivityDialog.visible = true;
    },
  },
};
</script>

<style scoped>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-list {
  width: 95%;
  margin: auto;
  padding: 20px;
}

.table {
  border-collapse: collapse;
}

.activity-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.content-text {
  white-space: pre-line;
  word-break: break-all;
}

.volunteer-time {
  text-align: center;
}
</style>
